<template>
  <div class='module'>
    <div class='moduleLi moduleLi1'>
      <div class='num num1'>{{ util.twoFixed(allIncome) }}</div>
      <div class='msg'>
        <span class='msgIcon msgIcon1 color-shallowBlue font18 iconfont icon-a-ziyuan12'></span>
        <span class='msgText'>实际收入</span>
      </div>
    </div>
    <div class='moduleLi'>
      <div class='num num2'>{{ util.twoFixed(profits) }}</div>
      <div class='msg'>
        <span class='msgIcon msgIcon1 color-shallowRed font18 iconfont icon-a-ziyuan15'></span>
        <span class='msgText'>盈利</span>
      </div>
    </div>
    <div class='moduleLi'>
      <div class='num color-yellow'>{{ util.twoFixed(cost) }}</div>
      <div class='msg'>
        <span class='msgIcon msgIcon1 color-yellow font18 iconfont icon-a-ziyuan13'></span>
        <span class='msgText'>实际投入</span>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: ['dataList'],
  components: {},
  data(){
    return {
      currentNav: '',
      allIncome: 0,
      profits: 0,
      cost: 0
    }
  },
  watch: {
    dataList () {
      this.getData()
    }
  },
  mounted(){
    if (!this.dataList.length) return
    this.getData()
  },
  methods: {
    getData () {
      let index = this.dataList.length - 1
      this.allIncome = this.dataList[index]['实际收入'],
      this.profits = this.dataList[index]['实际盈亏'],
      this.cost = this.dataList[index]['实际投入']
    }
  }
}
</script>
<style scoped lang='less'>
.module {

  background-image: url(../../../../assets/chartBg/FinanceBoard7.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;

  height: 120px;

  display: flex;
  justify-content: space-around;
  align-items: center;


  .moduleLi {
    width: 33.33%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
  }

  .num {
    font-size: 40px;
    font-weight: 400;
  }

  .num1 {
    color: #30CCFB;
  }

  .num2 {
    color: #FF755F;
  }

  .msg {

    display: flex;
    justify-content: center;
    align-items: center;

    .msgIcon {
      width: 25px;
      height: 24px;
    }

    .msgText {
      font-size: 20px;
      font-weight: 400;
      color: #FFFFFF;
      opacity: 0.8;
      margin-left: 10px;
    }

  }


}

</style>
